<template>
	<view class="main">
		<view id="header" class="header m-flex-row u-row-between">
			<view class="title">消息</view>
			<view class="title-tips m-flex-row u-row-between">
				<u--image :src="`${baseStaticFileUrl}/image/news/inform.svg`" width="8" height="10"/>
				<text>消息通知</text>
			</view>
		</view>
		<view class="header-level2 u-m-t-14 u-font-26">智能物联盒子管理平台</view>

		<view id="menu-list" class="menu-list u-m-t-30 ">
			<u-tabs
				lineHeight="5"
				:lineWidth="menuLineWidth"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
				}"
				:list="menuList" @click="menuItemClick"/>
		</view>

		<scroll-view :style="{ height: scrollViewHeight + 'px' }" scroll-y="true" @scrolltolower="reachBottom">
			<view class="news-list u-p-t-24">
				<view class="news-item u-m-b-24" v-for="(item,index) in newsList" :key="index">
					<view class="news-title">
						<u--image :src="`${baseStaticFileUrl}/image/news/news-icon.svg`" width="25" height="25"/>
						<view class="state u-m-l-17 u-font-32">订单待处理</view>
						<view class="look-over u-font-26">查看</view>
					</view>
					<view class="news-content u-font-26 u-lint-ellipsis-2">
						顾客ID【13554】已兑换【黄狗绒绒猫】礼品，请尽快处理订单
					</view>
					<view class="news-time u-font-24">{{$u.timeFormat(new Date().getTime(), 'yyyy-MM-dd HH:mm:ss')}}</view>
				</view>

				<u-loadmore v-if="newsList.length > 0" :status="status" :load-text="loadText" style="padding: 30rpx;"/>
				<u-empty v-else text="暂无消息" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				menuList:[
					{name: '全部'},
					{name: '待处理'},
					{name: '已处理'},
				],
				menuLineWidth: 30,
				menuItemIndex: 0,
				scrollViewHeight: 0,
				newsList: [],
				params: {
					pageNum: 1,
					pageSize: 10,
				},
			}
		},
		// 展示可以分享到朋友圈
		onShareTimeline(res) {},
		onReady() {
			this.getPomHeight();
			console.log(this.$helpers.getWindowHeight())
		},
		onLoad() {

		},
		methods: {
			menuItemClick(item) {
				console.log('item', item);
				this.menuItemIndex = item.index;
				if (item.index == 0){
					this.menuLineWidth = 30;
				} else {
					this.menuLineWidth = 45;
				}
			},



			//加载更多
			reachBottom() {
				if (this.status == 'nomore') {
					return;
				}

				this.status = 'loading';
				this.params.pageNum++;
				// this.findActivityList();
			},

			// 获取各个盒子的高度
			getPomHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#header').boundingClientRect(data => {
					if(data){
						// 异步的，所以让它获取到再减
						this.scrollViewHeight = this.scrollViewHeight - data.height;
						console.log("scrollViewHeight:" + this.scrollViewHeight)
					}
				}).exec();


				query.select('#menu-list').boundingClientRect(data => {
					if(data){
						// 异步的，所以让它获取到再减
						this.scrollViewHeight = this.scrollViewHeight - data.height;
						console.log("scrollViewHeight:" + this.scrollViewHeight)
					}
				}).exec();

				this.scrollViewHeight = uni.getSystemInfoSync().windowHeight + 5;
			},
		}
	}
</script>

<style lang="scss" scoped>
.main{
	padding: 24rpx;

	.header{
		width: 480rpx;
		padding-top: 92rpx;
		/*height: 32rpx;*/

		.title {
			font-size: 32rpx;
			font-weight: 700
		}

		.title-tips{
			width: 112rpx;
			height: 34rpx;
			background: rgb(255, 232, 219);
			border-radius: 60rpx;
			font-size: 20rpx;
			color: rgb(222, 112, 1);
			padding: 0 19rpx;
		}
	}

	.header-level2{
		color: rgb(118, 118, 118);
	}

	.menu-list{
		/deep/ .u-tabs__wrapper__nav__item {
			padding: 0 110rpx 0 0;
		}

		/deep/ .u-tabs__wrapper__nav__line {
			left: -54rpx;
		}
 	}

	.news-list{
		text-align: center;

		.news-item{
			padding: 36rpx 26rpx;
			width: 702rpx;
			height: 300rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background-color: #FFF;

			.news-title{
				display: flex;
				flex-direction: row;

				.state{
					width: 445rpx;
					color: rgba(0, 0, 0, 0.92);
					font-family: Microsoft YaHei;
				}

				.look-over{
					width: 140rpx;
					text-align: right;
					color: rgb(50, 112, 255);
				}
			}

			.news-content{
				width: 559rpx;
				height: 68rpx;
				padding: 37rpx 0;
				color: rgba(0, 0, 0, 0.5);
			}

			.news-time {
				color: rgba(0, 0, 0, 0.5);
			}
		}
	}
}
</style>
